<script setup>
import { ref } from "vue";
import { storeToRefs } from "pinia";
import { musicStore } from "@/store/music";
const { songListIds, musicDetail, songId, soundQuality } = storeToRefs(
  musicStore()
);

// const soundQuality = ref("pt");
</script>
<template>
  <div class="set-container">
    <div class="item-wrap">
      <div class="item">
        <div class="title">音质</div>
        <div class="wrap">
          <div class="left">音质选择</div>
          <div class="right">
            <el-select v-model="soundQuality" class="m-2" placeholder="Select">
              <el-option label="普通" value="standard" />
              <el-option label="较高" value="higher" />
              <el-option label="极高" value="exhigh" />
              <el-option label="无损" value="lossless" />
              <el-option label="HI-Res" value="hires" />
            </el-select>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.set-container {
  width: 100%;
  .item-wrap {
    width: 60%;
    margin: 0 auto;
    .item {
      .title {
        font-size: 25px;
        font-weight: 600;
        padding-bottom: 18px;
        border-bottom: 1px solid #ddd;
        margin-bottom: 20px;
      }
      .wrap {
        display: flex;
        justify-content: space-between;
        margin: 20px 0;
        .left {
          color: #999;
        }
        :deep(.right) {
          .select-trigger {
            width: 130px;
            outline: none;
            .el-input {
              outline: none;
              .el-input__wrapper {
                border: none;
                outline: none;
                box-shadow: none;
                background-color: rgba(247, 247, 247, 0.986);
                .el-input__inner {
                  border: none;
                }
              }
              .is-focus {
                outline: none;
                .el-input__wrapper {
                  box-shadow: none !important;
                  border: none;
                  outline: none;
                }
              }
            }
          }
        }
      }
    }
  }
}
:deep(.el-select .el-input.is-focus .el-input__wrapper) {
  box-shadow: none;
}
</style>
